<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>豆包AI聊天测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .chat-container {
            border: 1px solid #ddd;
            height: 400px;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 10px;
            background: #f9f9f9;
        }
        .message {
            margin: 10px 0;
            padding: 8px 12px;
            border-radius: 8px;
            width: fit-content;
            max-width: 70%;
            word-wrap: break-word;
        }
        .user-message {
            background: #007bff;
            color: white;
            margin-left: auto;
            text-align: right;
        }
        .bot-message {
            background: #e9ecef;
            color: #333;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        #msg {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        .status {
            color: #666;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<h2>豆包AI聊天测试</h2>
<div class="chat-container" id="chatContainer"></div>
<div class="input-container">
    <input id="msg" placeholder="请输入消息..." onkeypress="handleKeyPress(event)">
    <button onclick="sendMsg()" id="sendBtn" disabled>发送</button>
</div>
<div class="status" id="status">未连接</div>

<script>
    let ws = null;
    let currentBotMessage = null;
    let isConnected = false;
    
    function connectWebSocket() {
        try {
            ws = new WebSocket("ws://localhost:8080/ws/chat");
            
            ws.onopen = function() {
                isConnected = true;
                document.getElementById("status").textContent = "已连接";
                document.getElementById("status").style.color = "#28a745";
                document.getElementById("sendBtn").disabled = false;
                document.getElementById("msg").disabled = false;
            };
            
            ws.onclose = function(event) {
                isConnected = false;
                document.getElementById("status").textContent = "连接已断开";
                document.getElementById("status").style.color = "#dc3545";
                document.getElementById("sendBtn").disabled = true;
                document.getElementById("msg").disabled = true;
                
                // 3秒后尝试重连
                setTimeout(connectWebSocket, 3000);
            };
            
            ws.onerror = function(error) {
                console.error("WebSocket错误:", error);
                document.getElementById("status").textContent = "连接错误";
                document.getElementById("status").style.color = "#dc3545";
            };
            
            ws.onmessage = function(e) {
                try {
                    const data = JSON.parse(e.data);
                    if (data.sender === "robot") {
                        if (!currentBotMessage) {
                            // 创建新的机器人消息容器
                            currentBotMessage = document.createElement("div");
                            currentBotMessage.className = "message bot-message";
                            currentBotMessage.textContent = data.content;
                            document.getElementById("chatContainer").appendChild(currentBotMessage);
                        } else {
                            // 追加到当前机器人消息
                            currentBotMessage.textContent += data.content;
                        }
                        // 滚动到底部
                        document.getElementById("chatContainer").scrollTop = document.getElementById("chatContainer").scrollHeight;
                    }
                } catch (error) {
                    console.error("解析消息失败:", error);
                }
            };
        } catch (error) {
            console.error("创建WebSocket连接失败:", error);
        }
    }
    
    function sendMsg() {
        if (!isConnected || !ws) {
            alert("未连接到服务器，请稍后重试");
            return;
        }
        
        const msgInput = document.getElementById("msg");
        const message = msgInput.value.trim();
        if (!message) return;
        
        // 添加用户消息到聊天界面
        const userMessage = document.createElement("div");
        userMessage.className = "message user-message";
        userMessage.textContent = message;
        document.getElementById("chatContainer").appendChild(userMessage);
        
        // 发送消息到服务器
        try {
            ws.send(JSON.stringify({sender: "user", content: message}));
        } catch (error) {
            console.error("发送消息失败:", error);
            alert("发送消息失败，请检查连接");
            return;
        }
        
        // 清空输入框并重置机器人消息容器
        msgInput.value = "";
        currentBotMessage = null;
        
        // 滚动到底部
        document.getElementById("chatContainer").scrollTop = document.getElementById("chatContainer").scrollHeight;
    }
    
    function handleKeyPress(event) {
        if (event.key === "Enter" && isConnected) {
            sendMsg();
        }
    }
    
    // 页面加载时连接WebSocket
    window.onload = function() {
        connectWebSocket();
    };
    
    // 页面卸载时关闭连接
    window.onbeforeunload = function() {
        if (ws) {
            ws.close();
        }
    };
</script>
</body>
</html>